Highcharts একটি অত্যন্ত শক্তিশালী লাইব্রেরি, যা ডেটা ভিজ্যুয়ালাইজেশন করার জন্য ব্যবহৃত হয়। Highcharts এর এডভান্সড ফিচারসমূহ ব্যবহার করে আপনি আরও ইন্টারঅ্যাকটিভ, কাস্টমাইজড, এবং উন্নত ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন। Angular অ্যাপ্লিকেশনগুলিতে Highcharts এর এই ফিচারগুলো ব্যবহার করার মাধ্যমে আপনি রিয়েল-টাইম ডেটা, কাস্টম চার্ট, ডেটা এক্সপোর্ট, ৩ডি চার্ট, ইন্টারঅ্যাকটিভ মুড এবং আরও অনেক কিছু তৈরি করতে পারবেন।

এই টিউটোরিয়ালে আমরা Highcharts এর কিছু এডভান্সড ফিচার সম্পর্কে আলোচনা করব, যেগুলো Angular অ্যাপ্লিকেশনে ব্যবহার করা যায়।

1. ৩ডি চার্ট (3D Charts)

Highcharts আপনাকে ৩ডি চার্ট তৈরি করার সুবিধা প্রদান করে, যা আপনার ডেটা ভিজ্যুয়ালাইজেশনকে আরও উন্নত এবং আকর্ষণীয় করে তোলে। Highcharts এর 3D module এর মাধ্যমে আপনি 3D column, 3D bar, 3D scatter, এবং অন্যান্য 3D চার্ট তৈরি করতে পারেন।

ব্যবহার:

প্রথমে, Highcharts এর 3D module ইন্সটল এবং ব্যবহার করতে হবে:

npm install highcharts highcharts-3d --save

উদাহরণ:

import * as Highcharts from 'highcharts';
import Highcharts3D from 'highcharts/modules/3d';

Highcharts3D(Highcharts);  // 3D মডিউল সক্রিয় করা

Highcharts.chart('container', {
  chart: {
    type: 'column',
    options3d: {
      enabled: true,
      alpha: 10,
      beta: 25,
      depth: 50
    }
  },
  title: {
    text: '3D Column Chart'
  },
  series: [{
    data: [5, 10, 15, 20, 25]
  }]
});

এটি একটি ৩ডি কলাম চার্ট তৈরি করবে, যেখানে ব্যবহারকারীরা চার্টের প্রতিটি দিক দেখতে পারবে।

2. ডেটা এক্সপোর্ট (Data Exporting)

Highcharts এ ডেটা এক্সপোর্ট ফিচারটি ব্যবহারকারীকে চার্টের ডেটা PNG, JPEG, SVG, PDF সহ বিভিন্ন ফরম্যাটে এক্সপোর্ট করার সুযোগ দেয়। এছাড়া আপনি প্রিন্টিং ফিচারও যোগ করতে পারেন।

ব্যবহার:

import * as Highcharts from 'highcharts';
import Exporting from 'highcharts/modules/exporting';

Exporting(Highcharts);  // Exporting মডিউল সক্রিয় করা

Highcharts.chart('container', {
  title: {
    text: 'Exporting Example'
  },
  series: [{
    data: [1, 2, 3, 4, 5]
  }],
  exporting: {
    enabled: true,
    buttons: {
      contextButton: {
        menuItems: ['downloadPNG', 'downloadJPEG', 'downloadPDF', 'downloadSVG', 'separator', 'printChart']
      }
    }
  }
});

এটি ব্যবহারকারীদের বিভিন্ন ফরম্যাটে চার্ট ডাউনলোড করার সুযোগ দিবে এবং প্রিন্ট অপশনও প্রদর্শন করবে।

3. Highstock (Stock Charts)

Highcharts এর একটি প্লাগইন Highstock, যা স্টক মার্কেট, অর্থনৈতিক ডেটা, বা অন্য সময়ভিত্তিক ডেটা ভিজ্যুয়ালাইজেশনের জন্য ব্যবহৃত হয়। Highstock ডেটা দেখানোর জন্য ক্যান্ডেলস্টিক, লাইনের ডেটা, এবং অন্যান্য ফাইনান্সিয়াল চার্ট তৈরি করতে ব্যবহৃত হয়।

ব্যবহার:

npm install highcharts highcharts-stock --save

উদাহরণ:

import * as Highcharts from 'highcharts';
import Stock from 'highcharts/modules/stock';

Stock(Highcharts);  // Stock মডিউল সক্রিয় করা

Highcharts.stockChart('container', {
  series: [{
    name: 'Stock Price',
    data: [...stockData],
    tooltip: {
      valueDecimals: 2
    }
  }]
});

এটি স্টক মার্কেটের জন্য একটি ক্যান্ডেলস্টিক চার্ট তৈরি করবে এবং সময়ভিত্তিক ডেটা দেখাবে।

4. Heatmap

Highcharts এর Heatmap চার্ট আপনাকে একটি গ্রিড ভিত্তিক ডেটা ভিজ্যুয়ালাইজেশন করতে দেয়, যেখানে রঙের মাধ্যমে বিভিন্ন মানের তাপমাত্রা বা পরিমাণের চিত্র দেখা যায়।

ব্যবহার:

npm install highcharts highcharts-heatmap --save

উদাহরণ:

import * as Highcharts from 'highcharts';
import Heatmap from 'highcharts/modules/heatmap';

Heatmap(Highcharts);  // Heatmap মডিউল সক্রিয় করা

Highcharts.chart('container', {
  chart: {
    type: 'heatmap'
  },
  title: {
    text: 'Heatmap Example'
  },
  series: [{
    data: [
      [0, 0, 1], [0, 1, 2], [0, 2, 3],  // x, y, value
      [1, 0, 4], [1, 1, 5], [1, 2, 6]
    ]
  }]
});

এটি একটি Heatmap তৈরি করবে, যা ডেটার ভ্যালু অনুযায়ী রঙ পরিবর্তন করবে।

5. Sankey Diagram

Sankey Diagram একটি বিশেষ ধরনের চার্ট যা বিভিন্ন ডেটা স্ট্রিম বা প্রবাহের সম্পর্ক প্রদর্শন করে। এটি সাধারণত ফ্লো ডায়াগ্রাম বা সম্পর্কের চিত্র তৈরি করতে ব্যবহৃত হয়।

ব্যবহার:

npm install highcharts highcharts-sankey --save

উদাহরণ:

import * as Highcharts from 'highcharts';
import Sankey from 'highcharts/modules/sankey';

Sankey(Highcharts);  // Sankey মডিউল সক্রিয় করা

Highcharts.chart('container', {
  series: [{
    type: 'sankey',
    data: [
      ['Start', 'Intermediate', 5],
      ['Intermediate', 'End', 3],
      ['Start', 'End', 2]
    ]
  }]
});

এটি একটি Sankey Diagram তৈরি করবে, যেখানে ডেটার ফ্লো এবং সম্পর্ক প্রদর্শন করা হবে।

6. Geographical Maps with Highmaps

Highmaps একটি শক্তিশালী টুল যা পৃথিবী, দেশ বা কাস্টম ম্যাপের উপর ডেটা ভিজ্যুয়ালাইজেশনের সুযোগ দেয়। এটি ব্যবহৃত হয় ম্যাপভিত্তিক ডেটা দেখানোর জন্য।

ব্যবহার:

npm install highcharts highcharts-map --save

উদাহরণ:

import * as Highcharts from 'highcharts';
import Highmaps from 'highcharts/modules/map';
import mapData from '@highcharts/map-collection/custom/world.geo.json';  // মানচিত্র ডেটা

Highmaps(Highcharts);  // Highmaps মডিউল সক্রিয় করা

Highcharts.mapChart('container', {
  chart: {
    map: mapData
  },
  title: {
    text: 'World Map Example'
  },
  series: [{
    data: [
      ['US', 10], ['GB', 20], ['IN', 30]  // দেশের উপর ডেটা দেখানো
    ],
    mapData: mapData,
    joinBy: 'iso-a2'
  }]
});

এটি একটি বিশ্বমানচিত্র তৈরি করবে এবং দেশভিত্তিক ডেটা ভিজ্যুয়ালাইজ করবে।

সারাংশ

Highcharts এর এডভান্সড ফিচারসমূহ Angular অ্যাপ্লিকেশনগুলোতে ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ, ডাইনামিক এবং কাস্টমাইজযোগ্য করে তোলে। আপনি ৩ডি চার্ট, ডেটা এক্সপোর্ট, Heatmaps, Stock Charts, Sankey Diagrams, Highmaps ইত্যাদি ব্যবহার করে খুব সহজেই উন্নত ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন। এই ফিচারগুলো Highcharts কে একটি শক্তিশালী এবং বহুমুখী টুল হিসেবে গড়ে তোলে।

Highcharts Boost Module একটি এক্সটেনশন যা বড় ডেটাসেট নিয়ে কাজ করার সময় পারফরম্যান্সের উন্নতি সাধন করে। যখন আপনি অনেক ডেটা পয়েন্ট নিয়ে কাজ করেন, তখন ডেটার রেন্ডারিং এবং প্রক্রিয়াকরণ স্লো হয়ে যেতে পারে। Highcharts Boost মডিউল ইনস্টল এবং ব্যবহার করে আপনি সহজেই এই সমস্যা সমাধান করতে পারেন এবং ডেটা রেন্ডারিং দ্রুত করতে পারেন।

এখানে, আমরা দেখব কিভাবে Highcharts Boost Module ব্যবহার করে Angular অ্যাপে বড় ডেটা ভিজ্যুয়ালাইজেশন করা যায়।

1. Highcharts Boost Module ইনস্টলেশন

প্রথমে, আপনাকে Highcharts Boost Module এবং Highcharts লাইব্রেরি ইনস্টল করতে হবে। এটি Angular প্রজেক্টে ইনস্টল করার জন্য npm ব্যবহার করুন।

Highcharts ইনস্টল করুন:

npm install highcharts --save

Highcharts Boost মডিউল ইনস্টল করুন:

npm install highcharts-boost --save

2. Highcharts Boost Module ইমপোর্ট এবং সেটআপ

এখন আপনি Boost Module এবং Highcharts মডিউল ইমপোর্ট করবেন এবং Boost ফিচারটি Angular প্রজেক্টে সক্রিয় করবেন।

app.component.ts ফাইলে Boost মডিউল ইমপোর্ট করুন:

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import Boost from 'highcharts/modules/boost';  // Highcharts Boost মডিউল ইমপোর্ট করা

Boost(Highcharts);  // Boost মডিউল সক্রিয় করা

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  Highcharts = Highcharts;  // Highcharts ব্যবহার করার জন্য
  chartOptions: any;  // চার্টের অপশন স্টোর করার জন্য

  ngOnInit() {
    // বড় ডেটাসেটের জন্য Boost ব্যবহার করা
    this.chartOptions = {
      chart: {
        type: 'line',
        boostThreshold: 5000  // Boost থ্রেশহোল্ড সেট করা (যত বেশি ডেটা, তত দ্রুত রেন্ডার হবে)
      },
      title: {
        text: 'বড় ডেটা ভিজ্যুয়ালাইজেশন (Highcharts Boost)'
      },
      xAxis: {
        type: 'linear',
        min: 0
      },
      yAxis: {
        title: {
          text: 'Value'
        }
      },
      series: [{
        name: 'Data Series',
        data: this.generateLargeDataset(10000),  // বড় ডেটাসেট তৈরি করা
        turboThreshold: 0  // Boost ফিচার সক্রিয় করা
      }]
    };
  }

  // বড় ডেটাসেট তৈরি করার জন্য ফাংশন
  generateLargeDataset(points: number) {
    const data = [];
    for (let i = 0; i < points; i++) {
      data.push([i, Math.random() * 100]);  // X, Y ভ্যালু তৈরি করা
    }
    return data;
  }
}

3. Highcharts কম্পোনেন্টে Boost অপশন যুক্ত করা

এখন, app.component.html ফাইলে Highcharts কম্পোনেন্ট যুক্ত করুন:

<div style="height: 400px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 100%; display: block;">
  </highcharts-chart>
</div>

4. ব্যাখ্যা:

• boostThreshold: এই অপশনটি সেট করার মাধ্যমে, আপনি নির্দিষ্ট করতে পারেন কবে থেকে Boost মডিউল সক্রিয় হবে। উদাহরণস্বরূপ, boostThreshold: 5000 মানে হল যে যখন ডেটা পয়েন্ট ৫,০০০ পেরিয়ে যাবে, Boost মডিউল ব্যবহার শুরু হবে।
• turboThreshold: এই অপশনটি Highcharts Boost এর জন্য আরও উন্নত অপশন যা ডেটা পয়েন্টের সংখ্যা ০ করলে Boost সক্রিয় করতে সাহায্য করবে।
• Boosting: Highcharts Boost মডিউল একটি canvas rendering ব্যবহারের মাধ্যমে রেন্ডারিং পারফরম্যান্স উন্নত করে। এতে অনেক ডেটা পয়েন্টকে একসাথে রেন্ডার করতে সহায়তা করে।
• generateLargeDataset(): এই ফাংশনটি একটি বড় ডেটাসেট তৈরি করার জন্য ব্যবহার করা হয়েছে, যেটি ১০,০০০ পয়েন্ট তৈরি করে এবং সেগুলোকে রেন্ডার করে।

সারাংশ:

Highcharts Boost Module বড় ডেটাসেটের সাথে কাজ করার জন্য একটি অত্যন্ত কার্যকরী টুল। এটি ডেটা রেন্ডারিং দ্রুত করতে সহায়ক এবং Angular অ্যাপে Highcharts এর মাধ্যমে বড় ডেটা ভিজ্যুয়ালাইজেশন উপস্থাপন করতে ব্যবহার করা যায়। Boost মডিউল ব্যবহার করে, আপনি দ্রুত এবং দক্ষভাবে বিশাল পরিমাণ ডেটা প্রদর্শন করতে পারেন।

Highcharts Heatmaps হলো একটি গ্রাফিক্যাল উপস্থাপনা যেখানে রঙের মাধ্যমে ডেটার তাপমাত্রা বা মান প্রদর্শিত হয়। এটি বিশেষত ডেটার ঘনত্ব বা পরিমাণ দেখানোর জন্য ব্যবহৃত হয়, যেমন: কর্মী উৎপাদনশীলতা, আবহাওয়া ডেটা, বা অন্য কোনো বিশ্লেষণাত্মক ডেটা যা সৃষ্টিকারী এবং প্রতিক্রিয়া উপর ভিত্তি করে।

Angular এবং Highcharts ব্যবহার করে Heatmap তৈরি করার প্রক্রিয়া নিচে দেওয়া হলো।

স্টেপ 1: Highcharts এবং Highcharts Heatmap ইনস্টল করা

প্রথমে, Highcharts এবং Highcharts Heatmap ইনস্টল করতে হবে। আপনি npm ব্যবহার করে এই দুটি ইনস্টল করতে পারেন।

npm install highcharts highcharts-heatmap --save

এটি Highcharts এবং Highcharts Heatmap প্লাগইন ইনস্টল করবে।

স্টেপ 2: Highcharts Heatmap মডিউল ব্যবহার করা

Highcharts Heatmap ব্যবহারের জন্য আপনাকে Highcharts এবং Highcharts Heatmap মডিউলকে অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে।

1. app.module.ts ফাইলে Highcharts এবং Highcharts Heatmap ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import * as Highcharts from 'highcharts';
import Heatmap from 'highcharts/modules/heatmap';

// Highcharts Heatmap মডিউল ইমপোর্ট করা
Heatmap(Highcharts);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

এটি Highcharts Heatmap মডিউল আপনার অ্যাপে সক্রিয় করবে।

স্টেপ 3: Heatmap চার্ট কনফিগারেশন তৈরি করা

এখন, আমরা app.component.ts ফাইলে Heatmap চার্টের কনফিগারেশন তৈরি করব। Heatmap চার্টের ডেটা তিনটি মূল উপাদান দ্বারা নির্ধারিত হয়: x, y, এবং value (যা রঙের তাপমাত্রার মান নির্দেশ করে)।

app.component.ts ফাইলে নিম্নলিখিত কোড লিখুন:

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import Heatmap from 'highcharts/modules/heatmap';

Heatmap(Highcharts);  // Heatmap মডিউল সক্রিয় করা

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  Highcharts = Highcharts;  // Highcharts ব্যবহার করার জন্য
  chartOptions: any;  // চার্টের অপশন স্টোর করার জন্য

  ngOnInit() {
    // Highcharts Heatmap কনফিগারেশন তৈরি করা
    this.chartOptions = {
      chart: {
        type: 'heatmap',  // Heatmap টাইপ নির্বাচন করা
        marginTop: 40,
        marginBottom: 40
      },
      title: {
        text: 'Highcharts Heatmap Example'
      },
      xAxis: {
        categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
      },
      yAxis: {
        categories: ['X', 'Y', 'Z', 'W', 'V'],
        title: null
      },
      colorAxis: {
        min: 0,
        max: 10,
        stops: [
          [0, '#ffffff'], // কম মানের জন্য সাদা রঙ
          [0.2, '#ff0000'], // মাঝারি মানের জন্য লাল রঙ
          [1, '#0000ff'] // উচ্চ মানের জন্য নীল রঙ
        ]
      },
      series: [{
        name: 'Heatmap Data',
        borderWidth: 1,
        data: [
          [0, 0, 5], [0, 1, 7], [0, 2, 9],
          [1, 0, 3], [1, 1, 6], [1, 2, 2],
          [2, 0, 8], [2, 1, 4], [2, 2, 3],
          [3, 0, 2], [3, 1, 9], [3, 2, 1],
          [4, 0, 4], [4, 1, 8], [4, 2, 5]
        ],
        tooltip: {
          pointFormat: 'x: {point.x}, y: {point.y}, value: {point.value}'
        }
      }]
    };
  }
}

এখানে আমরা Heatmap চার্টের জন্য ডেটা সেট করেছি যা x, y এবং value তিনটি উপাদান দিয়ে গঠিত। colorAxis এর মাধ্যমে আমরা তাপমাত্রার জন্য রঙ নির্ধারণ করেছি, যেখানে 0 থেকে 10 পর্যন্ত মানের জন্য বিভিন্ন রঙ ব্যবহার করা হয়েছে।

স্টেপ 4: Heatmap চার্ট প্রদর্শন করা

app.component.html ফাইলে Heatmap চার্ট প্রদর্শন করতে নিম্নলিখিত কোড লিখুন:

<div style="height: 400px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 100%; display: block;">
  </highcharts-chart>
</div>

এটি Heatmap চার্টের জন্য HighchartsChartModule কম্পোনেন্ট প্রদর্শন করবে।

ব্যাখ্যা:

1. chartOptions: এই অপশনে আমরা চার্টের কনফিগারেশন প্রদান করেছি। এতে Heatmap টাইপ, xAxis, yAxis, এবং colorAxis কনফিগারেশন অন্তর্ভুক্ত রয়েছে।
2. colorAxis: এই অংশে আমরা তাপমাত্রার মান অনুযায়ী রঙের স্টপ সেট করেছি। এখানে তিনটি স্টপ (সাদা, লাল, নীল) নির্ধারণ করা হয়েছে।
3. series.data: এখানে ডেটা উপস্থাপন করার জন্য x, y, এবং value এর মান দেওয়া হয়েছে। এই ডেটার মাধ্যমে চার্টে রঙের তাপমাত্রা পরিবর্তিত হবে।
4. tooltip: টুলটিপের মাধ্যমে ব্যবহারকারী যখন একটি পয়েন্টের উপর হোভার করবে, তখন পয়েন্টের x, y এবং value মান দেখানো হবে।

সারাংশ

Highcharts Heatmap তৈরি করতে Angular এবং Highcharts ব্যবহার করে সহজে ইন্টারঅ্যাকটিভ এবং ভিজ্যুয়াল ডেটা উপস্থাপন করা যায়। আপনি Heatmap এর মাধ্যমে বিভিন্ন ডেটার তাপমাত্রা বা ঘনত্ব রঙের মাধ্যমে প্রদর্শন করতে পারেন, যা বিশেষত বড় ডেটাসেট বা জটিল ডেটার বিশ্লেষণে সহায়ক। Highcharts এর Heatmap মডিউল ব্যবহার করে আপনি সহজেই একাধিক ভ্যালু এবং তাদের রঙের মানের উপর ভিত্তি করে তথ্য উপস্থাপন করতে পারবেন।

Highcharts এর দুটি শক্তিশালী ফিচার Sankey Diagram এবং TreeMap চার্ট, যা ডেটার ফ্লো এবং হায়ারার্কিক্যাল ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহৃত হয়। এই টিউটোরিয়ালে আমরা Angular এবং Highcharts ব্যবহার করে Sankey এবং TreeMap চার্ট তৈরি করার প্রক্রিয়া দেখব।

1. Sankey Diagram তৈরি করা

Sankey Diagram হল একটি বিশেষ ধরনের গ্রাফ যা ডেটার ফ্লো বা প্রবাহকে প্রদর্শন করে। এটি সাধারণত ডেটার এক অবস্থান থেকে অন্য অবস্থানে স্থানান্তরের জন্য ব্যবহৃত হয়, যেমন ফ্লো, ট্রান্সফার বা রিসোর্স ব্যবস্থাপনা।

Step 1: Highcharts এবং Sankey মডিউল ইন্সটল করা

প্রথমে Highcharts এবং Sankey মডিউল ইনস্টল করতে হবে:

npm install highcharts highcharts-sankey --save

Step 2: Angular অ্যাপ্লিকেশনে Highcharts ইমপোর্ট করা

app.module.ts ফাইলে Highcharts এবং Sankey মডিউল ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HighchartsChartModule } from 'highcharts-angular';

// Highcharts এবং Sankey মডিউল ইমপোর্ট করা
import * as Highcharts from 'highcharts';
import Sankey from 'highcharts/modules/sankey';

Sankey(Highcharts); // Sankey মডিউল সক্রিয় করা

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HighchartsChartModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 3: Sankey Chart কনফিগারেশন তৈরি করা

এখন app.component.ts ফাইলে Sankey চার্টের কনফিগারেশন তৈরি করুন:

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  Highcharts = Highcharts;
  chartOptions = {
    chart: {
      type: 'sankey'
    },
    title: {
      text: 'Sankey Diagram Example'
    },
    series: [{
      type: 'sankey',
      data: [
        ['Start', 'Process', 5],
        ['Process', 'End', 3],
        ['Start', 'End', 2]
      ]
    }]
  };
}

Step 4: Highcharts কম্পোনেন্ট তৈরি করা

app.component.html ফাইলে Highcharts কম্পোনেন্ট যোগ করুন:

<div style="height: 500px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 100%; display: block;">
  </highcharts-chart>
</div>

এটি একটি Sankey Diagram তৈরি করবে যেখানে Start, Process, এবং End এর মধ্যে ডেটার ফ্লো দেখানো হবে।

2. TreeMap Chart তৈরি করা

TreeMap হল একটি হায়ারার্কিক্যাল চার্ট যা রেকটাঙ্গুলার ব্লক ব্যবহার করে ডেটার সম্পর্ক এবং প্রোপোরশনাল ভ্যালুগুলি দেখায়। এটি সাধারণত বড় ডেটাসেটের জন্য ব্যবহৃত হয় যেখানে বিভিন্ন বিভাগের মধ্যে তুলনা করা হয়।

Step 1: Highcharts এবং TreeMap মডিউল ইন্সটল করা

TreeMap তৈরি করতে আপনাকে Highcharts এবং Highcharts-Treemap মডিউল ইন্সটল করতে হবে:

npm install highcharts highcharts-treemap --save

Step 2: Angular অ্যাপ্লিকেশনে Highcharts ইমপোর্ট করা

app.module.ts ফাইলে Highcharts এবং TreeMap মডিউল ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HighchartsChartModule } from 'highcharts-angular';

// Highcharts এবং TreeMap মডিউল ইমপোর্ট করা
import * as Highcharts from 'highcharts';
import Treemap from 'highcharts/modules/treemap';

Treemap(Highcharts); // TreeMap মডিউল সক্রিয় করা

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HighchartsChartModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 3: TreeMap Chart কনফিগারেশন তৈরি করা

এখন app.component.ts ফাইলে TreeMap চার্টের কনফিগারেশন তৈরি করুন:

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  Highcharts = Highcharts;
  chartOptions = {
    chart: {
      type: 'treemap'
    },
    title: {
      text: 'TreeMap Chart Example'
    },
    series: [{
      type: 'treemap',
      data: [{
        id: 'A',
        name: 'Category A',
        value: 6,
        color: '#1f77b4'
      }, {
        id: 'B',
        name: 'Category B',
        value: 4,
        color: '#ff7f0e'
      }, {
        id: 'C',
        name: 'Category C',
        value: 3,
        color: '#2ca02c'
      }, {
        id: 'D',
        name: 'Category D',
        value: 2,
        color: '#d62728'
      }]
    }]
  };
}

Step 4: Highcharts কম্পোনেন্ট তৈরি করা

app.component.html ফাইলে Highcharts কম্পোনেন্ট যোগ করুন:

<div style="height: 500px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 100%; display: block;">
  </highcharts-chart>
</div>

এটি একটি TreeMap তৈরি করবে যেখানে Category A, Category B, Category C, এবং Category D এর মধ্যে সম্পর্ক এবং সাইজ প্রদর্শিত হবে।

সারাংশ

Sankey এবং TreeMap চার্ট ব্যবহার করে আপনি Highcharts এর মাধ্যমে ডেটার ফ্লো এবং হায়ারার্কিক্যাল ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন। Sankey Diagram ডেটার ফ্লো এবং TreeMap ডেটার পরিমাণ এবং সম্পর্ক প্রদর্শন করে। Angular এবং Highcharts ব্যবহার করে এই চার্টগুলিকে ইন্টারঅ্যাকটিভ এবং কাস্টমাইজড করা যায়, যা আপনাকে আপনার ডেটা ভিজ্যুয়ালাইজেশনে আরও গভীরতর অন্তর্দৃষ্টি দিতে সহায়ক হয়।

Highcharts Solid Gauge একটি বিশেষ ধরনের চার্ট যা মূলত একটি গোলাকার গেজের মতো কাজ করে। এটি মূলত পরিমাপ বা প্রগ্রেস ট্র্যাক করতে ব্যবহৃত হয়, যেমন কোন নির্দিষ্ট কাজের সম্পন্ন হওয়ার শতাংশ, প্রগ্রেস বা মেট্রিক্সের মান প্রদর্শন করা। Solid Gauge চার্ট ব্যবহার করে আপনি ডায়নামিক এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে পারেন, যা সরাসরি প্রগ্রেস বা পরিমাপের ভিজ্যুয়াল রিপ্রেজেন্টেশন দেয়।

এখানে আমরা দেখব কিভাবে Angular অ্যাপ্লিকেশনে Highcharts Solid Gauge চার্ট ইমপ্লিমেন্ট করা যায়।

স্টেপ 1: প্রয়োজনীয় লাইব্রেরি ইনস্টল করা

Highcharts Solid Gauge চার্ট ব্যবহার করার জন্য আপনাকে Highcharts এবং Highcharts Solid Gauge মডিউল ইনস্টল করতে হবে।

1. Highcharts ইনস্টল করুন:

npm install highcharts --save

2. Highcharts Solid Gauge ইনস্টল করুন:

npm install highcharts-solid-gauge --save

স্টেপ 2: Angular প্রজেক্টে Highcharts Solid Gauge ইমপ্লিমেন্ট করা

এখন, আপনার Angular অ্যাপ্লিকেশনে Highcharts এবং Solid Gauge মডিউল ব্যবহার করার জন্য সেটআপ করতে হবে।

1. app.module.ts ফাইলে Highcharts এবং Solid Gauge র‍্যাপার ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

// Highcharts এবং Solid Gauge মডিউল ইমপোর্ট করা
import * as Highcharts from 'highcharts';
import SolidGauge from 'highcharts/modules/solid-gauge';

// Solid Gauge মডিউল সক্রিয় করা
SolidGauge(Highcharts);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

স্টেপ 3: Highcharts Solid Gauge চার্ট কনফিগারেশন

এখন app.component.ts ফাইলে Highcharts Solid Gauge চার্ট কনফিগারেশন তৈরি করুন।

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import SolidGauge from 'highcharts/modules/solid-gauge';

SolidGauge(Highcharts);  // Solid Gauge মডিউল সক্রিয় করা

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  Highcharts = Highcharts;  // Highcharts ব্যবহার করার জন্য
  chartOptions: any;  // চার্টের অপশন স্টোর করার জন্য

  ngOnInit() {
    // Solid Gauge চার্টের কনফিগারেশন
    this.chartOptions = {
      chart: {
        type: 'solidgauge',  // Solid Gauge চার্ট টাইপ
        backgroundColor: 'transparent'
      },
      title: {
        text: 'Completion Progress'
      },
      pane: {
        center: ['50%', '50%'],
        size: '85%',
        startAngle: -90,
        endAngle: 90,
        background: [{
          backgroundColor: Highcharts.defaultOptions.pane.background[0].backgroundColor,
          innerRadius: '60%',
          outerRadius: '100%',
          shape: 'arc'
        }]
      },
      tooltip: {
        enabled: false
      },
      yAxis: {
        min: 0,
        max: 100,
        stops: [
          [0.1, '#55BF3B'], // Green
          [0.5, '#DDDF0D'], // Yellow
          [0.9, '#DF5353']  // Red
        ],
        lineWidth: 0,
        tickWidth: 0,
        tickPosition: 'inside',
        labels: {
          y: -16
        }
      },
      series: [{
        name: 'Progress',
        data: [80],  // এখানে আপনি ডায়নামিক ডেটা দিতে পারেন
        tooltip: {
          valueSuffix: '%'
        }
      }]
    };
  }
}

এখানে, data: [80] মানে হল যে গেজের প্রগ্রেস 80% পূর্ণ হবে। আপনি এই মানটি ডায়নামিকভাবে API বা অন্য কোনো উৎস থেকে পরিবর্তন করতে পারেন।

স্টেপ 4: Highcharts Solid Gauge চার্ট দেখানো

app.component.html ফাইলে Highcharts কম্পোনেন্ট যুক্ত করুন:

<div style="height: 400px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 100%; display: block;">
  </highcharts-chart>
</div>

এটি Angular অ্যাপ্লিকেশনে Solid Gauge চার্ট রেন্ডার করবে।

ব্যাখ্যা:

1. Solid Gauge মডিউল: Highcharts এর Solid Gauge প্লাগইন ইমপ্লিমেন্ট করার জন্য SolidGauge(Highcharts) কল করা হয়েছে। এটি type: 'solidgauge' ব্যবহার করে চার্টের ধরন সেট করে।
2. Chart Configuration: চার্টের কনফিগারেশনে pane ব্যবহার করা হয়েছে, যা মূলত গেজের ব্যাকগ্রাউন্ড এবং আর্ক সেট করে। এখানে center, size, startAngle, এবং endAngle দিয়ে গেজের পজিশন এবং আঙ্গল কনফিগার করা হয়েছে।
3. yAxis: এখানে min এবং max মান সেট করা হয়েছে (0 থেকে 100)। এছাড়াও, stops ব্যবহার করা হয়েছে বিভিন্ন রঙের জন্য, যেমন গ্রিন, ইয়েলো এবং রেড, যা বিভিন্ন প্রগ্রেস লেভেল প্রদর্শন করে।
4. Series Data: series এ ডেটা দেওয়া হয়েছে, যেমন [80] মানে 80% প্রগ্রেস। আপনি এটি API বা অন্য কোনো উৎস থেকে ডাইনামিকভাবে পরিবর্তন করতে পারেন।

সারাংশ

Highcharts Solid Gauge একটি চমৎকার চার্ট টাইপ, যা আপনাকে প্রগ্রেস বা পরিমাপের মান প্রদর্শন করতে সাহায্য করে। Angular অ্যাপে Highcharts Solid Gauge ইমপ্লিমেন্ট করার মাধ্যমে আপনি সহজেই ডায়নামিক এবং ইন্টারঅ্যাকটিভ গেজ চার্ট তৈরি করতে পারবেন। এই চার্টটি সাধারণত প্রগ্রেস, ফিনান্সিয়াল ডেটা, বা অন্যান্য পরিমাপ সিস্টেমের জন্য ব্যবহৃত হয়।